<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <title>Buttons</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="../../dist/css/ionic.css" rel="stylesheet">
    <style>
    body {
      backgrbackground: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 31%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(31%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* IE10+ */
      background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
    }
    </style>
    <script src="../../dist/js/ionic.bundle.js"></script>
    <script>
      angular.module('ionicApp', ['ionic'])
    </script>
  </head>
  <body>

    <header class="bar bar-header bar-dark">
      <h1 class="title">Buttons</h1>
    </header>

    <ion-content class="has-header">

      <div class="padding">

        <h3>icon classnames assigned to the button</h3>
        <p>
          <button class="button icon-left ion-home">Default</button> .button.icon-left.ion-home<br>
          <button class="button"><i class="icon ion-home"></i> Default</button> .button > .icon.ion-home<br>

          <button class="button icon icon-right ion-home">Default</button> .button.icon-right.ion-home<br>
          <button class="button">Default <i class="icon ion-home"></i></button> .button > .icon.ion-home<br>
          <button class="button icon-left ion-home">Default</button> .button.icon-left.ion-home<br>
          <button class="button"><i class="icon ion-home"></i> Default</button> .button > .icon.ion-home<br>

          <button class="button button-small icon icon-left ion-home">Small</button> .button.button-small.icon-left.ion-home<br>
          <button class="button button-small"><i class="icon ion-home"></i> Small</button> .button.button-small > .icon.ion-home<br>

          <button class="button button-large icon icon-left ion-home">Large</button> .button.button-large.icon-left.ion-home<br>
          <button class="button button-large"><i class="icon ion-home"></i> Large</button> .button.button-large > .icon.ion-home<br>

          <button class="button icon ion-home"></button> .button.icon.ion-home<br>
          <button class="button"><i class="icon ion-home"></i></button> .button > .icon.ion-home<br>

          <button class="button button-icon icon ion-home"></button> .button.button-icon.ion-home<br>
          <button class="button button-icon"><i class="icon ion-home"></i></button> .button > .button-icon.ion-home<br>

        </p>

        <hr>

        <h3>a.button default</h3>
        <p>
          <a class="button"><i class="icon ion-home"></i> Default</a>
          <a class="button button-light">.button-light</a>
          <a class="button button-stable">.button-stable</a>
          <a class="button button-positive">.button-positive</a>
          <a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
          <a class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
          <a class="button button-assertive"><i class="icon ion-home"></i></a>
          <a class="button button-energized"><i class="icon ion-home"></i> .button-energized</a>
          <a class="button button-royal">.button-royal</a>
          <a class="button button-dark"><i class="icon ion-chevron-right"></i> .button-dark</a>
          <a class="button button-energized icon-right ion-chevron-right">Login</a>
        </p>

        <hr>

        <h3>button.button default</h3>
        <p>
          <button class="button"><i class="icon ion-home"></i> Default</button>
          <button class="button button-light"><i class="icon ion-home"></i></button>
          <button class="button button-stable"><i class="icon ion-home"></i></button>
          <button class="button button-positive"><i class="icon ion-home"></i></button>
          <button class="button button-calm">.button-calm</button>
          <button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
          <button class="button button-assertive">.button-assertive</button>
          <button class="button button-energized">.button-energized</button>
          <button class="button button-royal"><i class="icon ion-home"></i> .button-royal</button>
          <button class="button button-dark"><i class="icon ion-home"></i></button>
        </p>

        <hr>

        <h3>a.button.button-large default</h3>
        <p>
          <a class="button button-large"><i class="icon ion-home"></i> Default</a>
          <a class="button button-large button-light">.button-light</a>
          <a class="button button-large button-stable">.button-stable</a>
          <a class="button button-large button-positive">.button-positive</a>
          <a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
          <a class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
          <a class="button button-large button-assertive"><i class="icon ion-home"></i></a>
          <a class="button button-large button-energized"><i class="icon ion-home"></i></a>
          <a class="button button-large button-royal">.button-royal</a>
          <a class="button button-large button-dark"><i class="icon ion-home"></i> .button-dark</a>
        </p>

        <hr>

        <h3>button.button. button-large default</h3>
        <p>
          <button class="button button-large"><i class="icon ion-home"></i> Default</button>
          <button class="button button-large button-light"><i class="icon ion-home"></i></button>
          <button class="button button-large button-stable"><i class="icon ion-home"></i></button>
          <button class="button button-large button-positive"><i class="icon ion-home"></i></button>
          <button class="button button-large button-calm">.button-calm</button>
          <button class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
          <button class="button button-large button-assertive">.button-assertive</button>
          <button class="button button-large button-energized">.button-energized</button>
          <button class="button button-large button-royal"><i class="icon ion-home"></i> .button-royal</button>
          <button class="button button-large button-dark"><i class="icon ion-home"></i></button>
        </p>

        <hr>

        <h3>a.button.button-small default</h3>
        <p>
          <a class="button button-small"><i class="icon ion-home"></i> Default</a>
          <a class="button button-small button-light"><i class="icon ion-home"></i> .button-light</a>
          <a class="button button-small button-stable"><i class="icon ion-home"></i> .button-stable</a>
          <a class="button button-small button-positive">.button-positive</a>
          <a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
          <a class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
          <a class="button button-small button-assertive"><i class="icon ion-home"></i></a>
          <a class="button button-small button-energized"><i class="icon ion-home"></i></a>
          <a class="button button-small button-royal">.button-royal</a>
          <a class="button button-small button-dark"><i class="icon ion-home"></i> .button-dark</a>
        </p>

        <hr>

        <h3>button.button.button-small</h3>
        <p>
          <button class="button button-small"><i class="icon ion-home"></i> Default</button>
          <button class="button button-small button-light"><i class="icon ion-home"></i></button>
          <button class="button button-small button-stable">.button-stable</button>
          <button class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
          <button class="button button-small button-positive"><i class="icon ion-home"></i></button>
          <button class="button button-small button-calm">.button-calm</button>
          <button class="button button-small button-assertive">.button-assertive</button>
          <button class="button button-small button-energized">.button-energized</button>
          <button class="button button-small button-royal"><i class="icon ion-home"></i> .button-royal</button>
          <button class="button button-small button-dark"><i class="icon ion-home"></i></button>
        </p>

        <hr>

        <h3>a.button.button-clear (Mixed in with others)</h3>
        <p>
          <a class="button button-clear"><i class="icon ion-home"></i> Default</a>
          <a class="button button-light">.button-light</a>
          <a class="button button-stable">.button-stable</a>
          <a class="button button-positive">.button-positive</a>
          <a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
          <a class="button button-clear button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
          <a class="button button-assertive"><i class="icon ion-home"></i></a>
          <a class="button button-clear button-energized"><i class="icon ion-home"></i></a>
          <a class="button button-clear button-royal">.button-royal</a>
          <a class="button button-clear button-dark"><i class="icon ion-home"></i> .button-dark</a>
        </p>

        <hr>

        <h3>button.button.button-clear default</h3>
        <p>
          <button class="button"><i class="icon ion-home"></i> Default</button>
          <button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
          <button class="button button-clear button-light"><i class="icon ion-home"></i></button>
          <button class="button button-clear button-stable"><i class="icon ion-home"></i></button>
          <button class="button button-clear button-positive"><i class="icon ion-home"></i></button>
          <button class="button button-clear button-calm">.button-calm</button>
          <button class="button button-clear button-assertive">.button-assertive</button>
          <button class="button button-clear button-energized">.button-energized</button>
          <button class="button button-clear button-royal"><i class="icon ion-home"></i> .button-royal</button>
          <button class="button button-dark"><i class="icon ion-home"></i></button>
        </p>

        <hr>

        <h3>a.button-block (parent w/ padding)</h3>
        <p>
          <a class="button button-block"><i class="icon ion-home"></i> Default</a>
          <a class="button button-block button-light">.button-light</a>
          <a class="button button-block button-stable">.button-stable</a>
          <a class="button button-block button-positive">.button-positive</a>
          <a class="button button-block button-calm">.button-calm</a>
          <a class="button button-block button-balanced">.button-balanced</a>
          <a class="button button-block button-assertive">.button-assertive</a>
          <a class="button button-block button-energized">.button-energized</a>
          <a class="button button-block button-royal">.button-royal</a>
          <a class="button button-block button-dark">.button-dark</a>
        </p>

        <hr>

        <h3>button.button-block (parent w/ padding)</h3>
        <p>
          <button class="button button-block"><i class="icon ion-home"></i> Default</button>
          <button class="button button-block button-light">.button-light</button>
          <button class="button button-block button-stable">.button-stable</button>
          <button class="button button-block button-positive">.button-positive</button>
          <button class="button button-block button-calm">.button-calm</button>
          <button class="button button-block button-balanced">.button-balanced</button>
          <button class="button button-block button-assertive">.button-assertive</button>
          <button class="button button-block button-energized">.button-energized</button>
          <button class="button button-block button-royal">.button-royal</button>
          <button class="button button-block button-dark">.button-dark</button>
        </p>

        <hr>

        <h3>a.button-icon (Borderless, 32px)</h3>
        <p>
          <a class="button button-icon"><i class="icon ion-home"></i></a>
          <a class="button button-clear button-dark">.button-clear Next .button-icon</i></a>
        </p>

        <hr>

        <h3>button.button-icon (Borderless, 32px)</h3>
        <p>
          <button class="button button-icon"><i class="icon ion-home"></i></button>
        </p>

        <hr>

        <h3>a.button-block.button-icon (Borderless, 32px)</h3>
        <p>
          <a class="button button-block button-icon"><i class="icon ion-home"></i></a>
        </p>

        <hr>

        <h3>button.button-block.button-icon (Borderless, 32px)</h3>
        <p>
          <button class="button button-block button-icon"><i class="icon ion-home"></i></button>
        </p>

        <hr>

        <h3>a.button-outline</h3>
        <p>
          <a class="button button-outline"><i class="icon ion-home"></i> Default</a>
          <a class="button button-light button-outline">.button-light</a>
          <a class="button button-stable button-outline">.button-stable</a>
          <a class="button button-positive button-outline">.button-positive</a>
          <a class="button button-calm button-outline">.button-calm</a>
          <a class="button button-balanced button-outline">.button-balanced</a>
          <a class="button button-assertive button-outline">.button-assertive</a>
          <a class="button button-energized button-outline">.button-energized</a>
          <a class="button button-royal button-outline">.button-royal</a>
          <a class="button button-dark button-outline">.button-dark</a>
        </p>

        <hr>

        <h3>button.button-outline</h3>
        <p>
          <button class="button button-outline"><i class="icon ion-home"></i> Default</button>
          <button class="button button-light button-outline">.button-light</button>
          <button class="button button-stable button-outline">.button-stable</button>
          <button class="button button-positive button-outline">.button-positive</button>
          <button class="button button-calm button-outline">.button-calm</button>
          <button class="button button-balanced button-outline">.button-balanced</button>
          <button class="button button-assertive button-outline">.button-assertive</button>
          <button class="button button-energized button-outline">.button-energized</button>
          <button class="button button-royal button-outline">.button-royal</button>
          <button class="button button-dark button-outline">.button-dark</button>
        </p>

        <hr>

        <h3>a.button-block.button-outline (parent w/ padding)</h3>
        <p>
          <a class="button button-outline button-block"><i class="icon ion-home"></i> Default</a>
          <a class="button button-light button-outline button-block">.button-light</a>
          <a class="button button-stable button-outline button-block">.button-stable</a>
          <a class="button button-positive button-outline button-block">.button-positive</a>
          <a class="button button-calm button-outline button-block">.button-calm</a>
          <a class="button button-balanced button-outline button-block">.button-balanced</a>
          <a class="button button-assertive button-outline button-block">.button-assertive</a>
          <a class="button button-energized button-outline button-block">.button-energized</a>
          <a class="button button-royal button-outline button-block">.button-royal</a>
          <a class="button button-dark button-outline button-block">.button-dark</a>
        </p>

        <hr>

        <h3>button.button-block.button-outline (parent w/ padding)</h3>
        <p>
          <button class="button button-outline button-block"><i class="icon ion-home"></i> Default</button>
          <button class="button button-light button-outline button-block">.button-light</button>
          <button class="button button-stable button-outline button-block">.button-stable</button>
          <button class="button button-positive button-outline button-block">.button-positive</button>
          <button class="button button-calm button-outline button-block">.button-calm</button>
          <button class="button button-balanced button-outline button-block">.button-balanced</button>
          <button class="button button-assertive button-outline button-block">.button-assertive</button>
          <button class="button button-energized button-outline button-block">.button-energized</button>
          <button class="button button-royal button-outline button-block">.button-royal</button>
          <button class="button button-dark button-outline button-block">.button-dark</button>
        </p>

        <hr>

        <h3>a.button-clear</h3>
        <p>
          <a class="button button-clear"><i class="icon ion-home"></i> Default</a>
          <a class="button button-light button-clear">.button-light</a>
          <a class="button button-stable button-clear">.button-stable</a>
          <a class="button button-positive button-clear">.button-positive</a>
          <a class="button button-calm button-clear">.button-calm</a>
          <a class="button button-balanced button-clear">.button-balanced</a>
          <a class="button button-assertive button-clear">.button-assertive</a>
          <a class="button button-energized button-clear">.button-energized</a>
          <a class="button button-royal button-clear">.button-royal</a>
          <a class="button button-dark button-clear">.button-dark</a>
        </p>

        <hr>

        <h3>button.button-clear</h3>
        <p>
          <button class="button button-clear"><i class="icon ion-home"></i> Default</button>
          <button class="button button-light button-clear">.button-light</button>
          <button class="button button-stable button-clear">.button-stable</button>
          <button class="button button-positive button-clear">.button-positive</button>
          <button class="button button-calm button-clear">.button-calm</button>
          <button class="button button-balanced button-clear">.button-balanced</button>
          <button class="button button-assertive button-clear">.button-assertive</button>
          <button class="button button-energized button-clear">.button-energized</button>
          <button class="button button-royal button-clear">.button-royal</button>
          <button class="button button-dark button-clear">.button-dark</button>
        </p>

        <hr>

        <h3>a.button-block.button-clear (parent w/ padding)</h3>
        <p>
          <a class="button button-clear button-block"><i class="icon ion-home"></i> Default</a>
          <a class="button button-light button-clear button-block">.button-light</a>
          <a class="button button-stable button-clear button-block">.button-stable</a>
          <a class="button button-positive button-clear button-block">.button-positive</a>
          <a class="button button-calm button-clear button-block">.button-calm</a>
          <a class="button button-balanced button-clear button-block">.button-balanced</a>
          <a class="button button-assertive button-clear button-block">.button-assertive</a>
          <a class="button button-energized button-clear button-block">.button-energized</a>
          <a class="button button-royal button-clear button-block">.button-royal</a>
          <a class="button button-dark button-clear button-block">.button-dark</a>
        </p>

        <hr>

        <h3>button.button-block.button-clear (parent w/ padding)</h3>
        <p>
          <button class="button button-clear button-block"><i class="icon ion-home"></i> Default</button>
          <button class="button button-light button-clear button-block">.button-light</button>
          <button class="button button-stable button-clear button-block">.button-stable</button>
          <button class="button button-positive button-clear button-block">.button-positive</button>
          <button class="button button-calm button-clear button-block">.button-calm</button>
          <button class="button button-balanced button-clear button-block">.button-balanced</button>
          <button class="button button-assertive button-clear button-block">.button-assertive</button>
          <button class="button button-energized button-clear button-block">.button-energized</button>
          <button class="button button-royal button-clear button-block">.button-royal</button>
          <button class="button button-dark button-clear button-block">.button-dark</button>
        </p>

      </div>

      <hr>

      <h3>a.button-block (parent w/out padding)</h3>
      <p>
        <a class="button button-block"><i class="icon ion-home"></i> Default</a>
        <a class="button button-block button-light">.button-light</a>
        <a class="button button-block button-stable">.button-stable</a>
        <a class="button button-block button-positive">.button-positive</a>
        <a class="button button-block button-calm">.button-calm</a>
        <a class="button button-block button-balanced">.button-balanced</a>
        <a class="button button-block button-assertive">.button-assertive</a>
        <a class="button button-block button-energized">.button-energized</a>
        <a class="button button-block button-royal">.button-royal</a>
        <a class="button button-block button-dark">.button-dark</a>
      </p>

      <hr>

      <h3>a.button-block (.button-full on the parent)</h3>
      <p class="button-full">
        <a class="button"><i class="icon ion-home"></i> Default</a>
        <a class="button button-light">.button-light</a>
        <a class="button button-stable">.button-stable</a>
        <a class="button button-positive">.button-positive</a>
        <a class="button button-calm">.button-calm</a>
        <a class="button button-balanced">.button-balanced</a>
        <a class="button button-assertive">.button-assertive</a>
        <a class="button button-energized">.button-energized</a>
        <a class="button button-royal">.button-royal</a>
        <a class="button button-dark">.button-dark</a>
      </p>

      <hr>

      <h3>button.button-block.button-full on each button and nothing on the parent</h3>
      <p>
        <button class="button button-full"><i class="icon ion-home"></i> Default</button>
        <button class="button button-full button-light">.button-light</button>
        <button class="button button-full button-stable">.button-stable</button>
        <button class="button button-full button-positive">.button-positive</button>
        <button class="button button-full button-calm">.button-calm</button>
        <button class="button button-full button-balanced">.button-balanced</button>
        <button class="button button-full button-assertive">.button-assertive</button>
        <button class="button button-full button-energized">.button-energized</button>
        <button class="button button-full button-royal">.button-royal</button>
        <button class="button button-full button-dark">.button-dark</button>
      </p>

      <hr>

      <p>
        <a class="button disabled button-assertive" href="#">Disabled By ClassName</a>
        <a class="button button-assertive" disabled href="#">Disabled By Attribute</a>
      </p>

      <hr>

      <p>
        <input type="submit" class="button button-block button-positive" name="op" value="input element">
        <button class="button button-block button-positive">button element</button>
      </p>

      <p>
        <a class="button button-assertive" href="./">All CSS Tests</a>
      </p>

      <hr>

    </ion-content>

  </body>
</html>
